<template>
    <div class="navbar">
    <div class="navbar-left">
        <a @click="gotohome"><i class="fas fa-home"></i></a>
    </div>
    <div class="navbar-center">
        <div class="dropdown">
            <a class="dropbtn">文章</a>
            <div class="dropdown-content">
                <a href="#"><i class="fas fa-list"></i>文章列表</a>
                <a href="#"><i class="fas fa-th-large"></i>文章分类</a>
                <a href="#"><i class="fas fa-tags"></i>文章标签</a>
                <a href="#"><i class="fas fa-book"></i>即时短文</a>
            </div>
        </div>
        <div class="dropdown">
            <a class="dropbtn">导航</a>
            <div class="dropdown-content">
                <a href="#"><i class="fa fa-compact-disc"></i>音乐欣赏</a>
                <a href="#"><i class="fa fa-film"></i>影视推荐</a>
                <a href="#"><i class="fa fa-image"></i>忆念留影</a>
            </div>
        </div>
        <a href="#" class="dropbtn">友链</a>
        <div class="dropdown">
            <a class="dropbtn">我的</a>
            <div class="dropdown-content">
                <a href="#"><i class="fa fa-bookmark"></i>网址收藏</a>
                <a href="#"><i class="fa fa-comment"></i>博客留言</a>
                <a href="#"><i class="fa fa-file-powerpoint"></i>PPT收藏</a>
            </div>
        </div>
    </div>
    <div class="navbar-right">
        <a href="#"><i class="fas fa-book"></i></a>
        <a href="#"><i class="fas fa-podcast"></i></a>
        <a href="#"><i class="fas fa-search"></i></a>
        <div class="dropdown">
            <a href="#" class="dropbtn"><i class="fa fa-cog"></i></a>
            <div class="dropdown-content" style="position: absolute; left: auto; right: 0; transform: translateX(0); min-width: 150px;">
                <a href="#" id="theme-toggle"><i id="theme-icon" class="fas fa-moon"></i></a>
                <a th:href="@{/logout}"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="intro-container">
        <div class="tags">
            <div class="tag">原创</div>
            <div class="tag">经验分享</div>
            <div class="tag no-background">
                <i class="fas fa-hashtag"></i> 推荐
            </div>
            <div class="tag no-background">
                <i class="fas fa-hashtag"></i> 设计模式
            </div>
            <div class="tag no-background">
                <i class="fas fa-hashtag"></i> 结构型模式
            </div>
        </div>
        <h1>设计模式之结构型模式：构建灵活且可复用的类和对象结构</h1>
        <div class="info">
            <div>
                <i class="fas fa-calendar-alt"></i>
                2023/7/24
            </div>
            <div>
                <i class="fas fa-map-marker-alt"></i>
                山西
            </div>
            <div>
                <i class="fas fa-eye"></i>
                8.6k
            </div>
            <div>
                <i class="fas fa-clock"></i>
                35分钟
            </div>
            <div>
                <i class="fas fa-thumbs-up"></i>
                271
            </div>
            <div>
                <i class="fas fa-comment"></i>
                1
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="main-content">
            <div class="section" id="proxy-pattern">
                <h2>代理模式</h2>
                <p>结构型模式描述如何将类或对象按某种布局组成更大的结构。它分为类结构型模式和对象结构型模式，前者采用继承机制来组织接口和类，后者采用组合或聚合来组合对象。</p>
                <p>代理模式通过给某对象提供一个代理对象来控制对该对象的访问。代理对象在客户端和目标对象之间起到了中介的作用。</p>
                <ul>
                    <li>静态代理</li>
                    <li>动态代理</li>
                    <li>CGLIB代理</li>
                </ul>
            </div>
            <div class="section" id="adapter-pattern">
                <h2>适配器模式</h2>
                <p>适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。它通过将一个类的接口转换成客户端所期望的另一种接口，实现类之间的兼容性。</p>
                <p>适配器模式有两种类型：类适配器模式和对象适配器模式。</p>
                <ul>
                    <li>类适配器</li>
                    <li>对象适配器</li>
                </ul>
            </div>
            <div class="section" id="decorator-pattern">
                <h2>装饰者模式</h2>
                <p>装饰者模式动态地给一个对象添加一些额外的职责，就增加功能来说，装饰者模式相比生成子类更为灵活。</p>
                <p>装饰者模式主要用于扩展功能，其主要特点是装饰者和被装饰对象都实现了相同的接口或继承自相同的类。</p>
                <ul>
                    <li>透明装饰模式</li>
                    <li>半透明装饰模式</li>
                </ul>
            </div>
            <div class="section" id="bridge-pattern">
                <h2>桥接模式</h2>
                <p>桥接模式通过使用“组合关系”而非继承关系来处理多维度的变化，从而使各个维度可以独立变化。</p>
                <p>桥接模式的目的是将抽象部分与实现部分分离，使它们可以独立变化。</p>
                <ul>
                    <li>抽象部分</li>
                    <li>实现部分</li>
                </ul>
            </div>
            <div class="section" id="facade-pattern">
                <h2>外观模式</h2>
                <p>外观模式通过为多个复杂的子系统提供一个一致的接口，使这些子系统更加容易使用。</p>
                <p>外观模式提供了一个高层接口，使得子系统更容易使用。</p>
                <ul>
                    <li>子系统A</li>
                    <li>子系统B</li>
                    <li>子系统C</li>
                </ul>
            </div>
            <div class="section" id="composite-pattern">
                <h2>组合模式</h2>
                <p>组合模式将对象组合成树形结构以表示“部分-整体”的层次结构，使得用户对单个对象和组合对象具有一致的访问性。</p>
                <p>组合模式使得客户端可以统一地处理单个对象和组合对象。</p>
                <ul>
                    <li>叶子节点</li>
                    <li>组合节点</li>
                </ul>
            </div>
            <div class="section" id="flyweight-pattern">
                <h2>享元模式</h2>
                <p>享元模式通过共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来减少对象的创建，从而减少内存消耗。</p>
                <p>享元模式主要用于解决系统中存在大量相似对象的情况。</p>
                <ul>
                    <li>内部状态</li>
                    <li>外部状态</li>
                </ul>
            </div>
        </div>
        <div class="sidebar">
            <div class="profile">
                <img src="/src/assets/cat.gif" alt="Profile Picture">
                <h3>随风起</h3>
                <p>分享知识与美好时光</p>
                <div>
                    <a href="#"><i class="fab fa-github"></i></a>
                    <a href="#"><i class="fas fa-envelope"></i></a>
                </div>
            </div>
            <div class="announcement">
                <h4>公告</h4>
                <p>欢迎来到我的博客</p>
            </div>
            <div class="sticky-menu">
                <h4>目录</h4>
                <ul class="menu">
                    <li><a href="#proxy-pattern">代理模式</a></li>
                    <li><a href="#adapter-pattern">适配器模式</a></li>
                    <li><a href="#decorator-pattern">装饰者模式</a></li>
                    <li><a href="#bridge-pattern">桥接模式</a></li>
                    <li><a href="#facade-pattern">外观模式</a></li>
                    <li><a href="#composite-pattern">组合模式</a></li>
                    <li><a href="#flyweight-pattern">享元模式</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</template>

<script setup>
    document.addEventListener('DOMContentLoaded', function() {
        var dropdowns = document.querySelectorAll('.dropdown');

        dropdowns.forEach(function(dropdown) {
            var dropdownContent = dropdown.querySelector('.dropdown-content');
            var timeout;

            dropdown.addEventListener('mouseenter', function() {
                clearTimeout(timeout);
                dropdownContent.style.display = 'flex';
                setTimeout(function() {
                    dropdownContent.style.opacity = '1';
                    dropdownContent.style.visibility = 'visible';
                }, 10);
            });

            dropdown.addEventListener('mouseleave', function() {
                timeout = setTimeout(function() {
                    dropdownContent.style.opacity = '0';
                    dropdownContent.style.visibility = 'hidden';
                    setTimeout(function() {
                        dropdownContent.style.display = 'none';
                    }, 500);
                }, 100);
            });

            dropdownContent.addEventListener('mouseenter', function() {
                clearTimeout(timeout);
            });

            dropdownContent.addEventListener('mouseleave', function() {
                timeout = setTimeout(function() {
                    dropdownContent.style.opacity = '0';
                    dropdownContent.style.visibility = 'hidden';
                    setTimeout(function() {
                        dropdownContent.style.display = 'none';
                    }, 1000);
                }, 200);
            });
        });
    });

    const gotohome = () => {
        window.location.href = '/home';
    }
</script>

<style src="../assets/style/FakeBokeInfo.css">

</style>